<template>
  <el-main height="">
    <!-- 搜索栏 -->
    <el-form :model="searchParm" :inline="true" size="default">
      <el-form-item label="">
        <el-input placeholder="请输入关键字" v-model="searchParm.roleName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="Search" @click="searchBtn">搜索</el-button>
        <el-button icon="Close" type="danger" plain @click="resetBtn">重置</el-button>
        <el-button v-if="global.$hasPerm(['sys:role:add'])"  icon="Plus" type="primary" @click="addBtn">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :height="tableHeight" :data="tableData" border size="default">
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column v-if="global.$hasPerm(['sys:role:edit','sys:role:assign','sys:role:delete'])" label="操作" width="320" align="center">
        <template #default="scope">
          <el-button v-if="global.$hasPerm(['sys:role:edit'])" icon="Edit" size="default" type="primary" @click="editBtn(scope.row)">编辑</el-button>
          <el-button v-if="global.$hasPerm(['sys:role:assign'])" icon="Edit" size="default" type="success" @click="assignTreeBtn(scope.row)">分配菜单</el-button>
          <el-button v-if="global.$hasPerm(['sys:role:delete'])" icon="Delete" size="default" type="danger" @click="deleteBtn(scope.row.roleId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="sizeChange" @current-change="currentChange"
                   :current-page.sync="searchParm.currentPage"
                   :page-sizes="[10,20,40,80,100]"
                   :page-size="searchParm.pageSize" layout="total, sizes, prev, pager, next, jumper"
                   :total="searchParm.total" background></el-pagination>
    <!-- 新增或者编辑弹框 -->
    <SysDialog :title="dialog.title" :visible="dialog.visible" :height="dialog.height" :width="dialog.width"
               @on-close="onClose" @on-confirm="commit">
      <template v-slot:content>
        <el-form :model="addModel" ref="addRef" :rules="rules" label-width="80px" :inline="false"
                 size="default">
          <el-form-item prop="roleName" label="角色名称">
            <el-input v-model="addModel.roleName"></el-input>
          </el-form-item>
          <el-form-item prop="remark" label="备注">
            <el-input v-model="addModel.remark"></el-input>
          </el-form-item>

        </el-form>

      </template>

    </SysDialog>
<!--    分配菜单-->
    <AssignTree ref="assignTree"></AssignTree>
  </el-main>

</template>

<script setup lang="ts">
import {nextTick, onMounted, reactive, ref} from 'vue';
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import {ElMessage, type FormInstance} from 'element-plus';
import {addApi, deleteApi, editApi, getListApi} from '@/api/role';
import type {SysRole} from "@/api/role/RoleModel";
import useInstance from '@/hooks/useInstance';
import AssignTree from "@/views/system/Role/AssignTree.vue";
//菜单树的ref
const assignTree = ref()
//分配菜单按钮
const assignTreeBtn = (row:SysRole)=>{
  assignTree.value.show(row.roleId,row.roleName)
}
const {global} = useInstance();
//列表框属性
const {dialog, onClose, onShow, onConfirm} = useDialog();
//表单绑定对象，搜索的
const searchParm = reactive({
  currentPage: 1,
  pageSize: 10,
  roleName: '',
  total: 0,

})
//新增
const addBtn = () => {
  dialog.title = '新增角色';
  dialog.height = 500
  tags.value = '0';
  onShow()
  //清空表单
  addRef.value?.resetFields();
}
//新增表单
const addModel = reactive({
  roleId: '',
  roleName: '',
  remark: '',

})
//添加或者是新增的一个标志,0是添加，1是编辑
const tags = ref('')
//表单ref属性
const addRef = ref<FormInstance>()
//表单新增规则
const rules = reactive({
  roleName: [{required: true, message: '请输入角色名称', trigger: 'change'}],
})
//表单提交
const commit = () => {
  addRef.value?.validate(async (valid) => {
    if (valid) {
      let res = null;
      if (tags.value == '0') {
        res = await addApi(addModel);
      } else {
        res = await editApi(addModel);
      }

      if (res && res.code == 200) {
        //新增或者更新都需要刷新列表
        getList();
        ElMessage.success(res.message)
        onClose();
      }
    }
  })
}
//表格高度
const tableHeight = ref(0)
//列表数据
const tableData = ref([])
//查询角色列表
const getList = async () => {
  let res = await getListApi(searchParm);
  if (res && res.code == 200) {
    console.log(res);
    //设置表格数据
    tableData.value = res.data.records;
    //设置分页总条数
    searchParm.total = res.data.total;

  }
}
onMounted(() => {
  nextTick(() => {
    tableHeight.value = window.innerHeight - 230;
  })
  getList();
})
//编辑按钮
const editBtn = (row: SysRole) => {
  dialog.title = '编辑角色';
  dialog.height = 500;
  tags.value = '1';
  //清空表单
  addRef.value?.resetFields();
  //回显数据
  nextTick(() => {
    Object.assign(addModel, row);
  })
  onShow();
}
//删除按钮
const deleteBtn = async (roleId: string) => {
  const confirm = await global.$myconfirm('确定删除该数据吗')
  if (confirm) {
    let res = await deleteApi(roleId);
    console.log(res);
    if (res && res.code == 200) {
      ElMessage.success(res.message)
      getList();
    }
  }

}
//搜索
const searchBtn = () => {
  getList();
}
//重置
const resetBtn = () => {
  searchParm.roleName = '';
  searchParm.currentPage = 1;
  getList();
}
//分页相关
//分页容量改变
const sizeChange = (val: number) => {
  searchParm.pageSize = val;
  getList();
}
//当前页改变
const currentChange = (val: number) => {
  searchParm.currentPage = val;
  getList();
}


</script>

<style scoped></style>